<template>
  <div>

    <el-tabs v-model="active">
      <el-tab-pane label="组件属性" name="first">

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              字段标识
            </div>
          </el-col>
          <el-col :span="18">
            <select-model :model.sync="store.current.model" ></select-model>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              显示文本
            </div>
          </el-col>
          <el-col :span="18">
            <el-input v-model="store.current.options.defaultValue"></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              字体大小
            </div>
          </el-col>
          <el-col :span="18">
            <el-input-number v-model.number="store.current.options.fontSize"></el-input-number>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              字体颜色
            </div>
          </el-col>
          <el-col :span="2">
            <colorPicker v-model="store.current.options.color" />
          </el-col>
          <el-col :span="16">
            <el-input v-model.number="store.current.options.color"></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              对齐方式
            </div>
          </el-col>
          <el-col :span="18">
            <el-select v-model="store.current.options.align" placeholder="请选择对齐方式">
              <el-option v-for="item in alignOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>

      </el-tab-pane>
      <el-tab-pane label="容器属性" name="second">

        <div class="box-model-config">
          <div class="title">内填充</div>
          <div class="configuration">

            <el-row>

              <el-col :span="4">
                <div class="prop-set-title">
                  上
                </div>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="store.current.boxModelStyle.paddingTop"></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{store.current.boxModelStyle.paddingTop+'px'}}
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <div class="prop-set-title">
                  右
                </div>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="store.current.boxModelStyle.paddingRight"></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{store.current.boxModelStyle.paddingRight+'px'}}
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <div class="prop-set-title">
                  下
                </div>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="store.current.boxModelStyle.paddingBottom"></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{store.current.boxModelStyle.paddingBottom+'px'}}
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <div class="prop-set-title">
                  左
                </div>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="store.current.boxModelStyle.paddingLeft"></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{store.current.boxModelStyle.paddingLeft+'px'}}
                </div>
              </el-col>
            </el-row>

          </div>
        </div>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import { textAlign } from "@/low-code/utils/enumeration.js"
  export default {
    inject: ['getStore'],
    data () {
      return {
        active: 'first',
        alignOptions: [{
          value: textAlign.CENTER,
          label: '居中'
        }, {
          value: textAlign.left,
          label: '居左'
        }, {
          value: textAlign.RIGHT,
          label: '居右'
        }],
      }
    },
    methods: {
      handleOptionsRemove (index) {
        this.store.current.columns.splice(index, 1)

      },
      handleAddColumn () {
        this.store.current.columns.push({
          span: '',
          list: []
        })
      }
    },
    computed: {
      store () {
        return this.getStore()
      }
    }
  }
</script>

<style scoped>
.box-model-config {
  padding-left: 10px;
}
.box-model-config .title {
  line-height: 32px;
  font-size: 14px;
}
.el-input-number {
  line-height: 30px;
  width: 100%;
}
li {
  list-style-type: none;
}
>>> .el-tabs__item[aria-controls] {
  width: 50% !important;
  text-align: center;
}

>>> .m-colorPicker .box {
  position: fixed !important;
}
</style>